<template>
  <headPage></headPage>
  <div class="main_box information">
    <titleBack title="订单详情"></titleBack>
    <div class="content">
      <div class="item">
        <div class="item_label">发票类型</div>
        <div>增值税电子普通发票</div>
      </div>
      <div class="select_1">
        <div class="select_1_le">
          <span>抬头类型</span>
        </div>
        <div class="select_1_ri">
          <div class="select_1_item" @click="select(1)">
            <img
              v-if="invoiceType == 1"
              src="../../../assets/default/3.png"
              alt=""
            />
            <img v-else src="../../../assets/default/4.png" alt="" />
            <span>个人或事业单位</span>
          </div>
          <div class="select_1_item" @click="select(2)">
            <img
              v-if="invoiceType == 2"
              src="../../../assets/default/3.png"
              alt=""
            />
            <img v-else src="../../../assets/default/4.png" alt="" />
            <span>企业</span>
          </div>
        </div>
      </div>
      <div class="item_read">
        <div class="item_label">
          <span class="label_icon">*</span>
          <span>发票抬头</span>
        </div>
        <div class="item_input">
          <el-input
            v-model="name"
            placeholder="填写需要开具发票的姓名"
            placeholder-style="color:#999;font-size:8px;"
            maxlength="14"
          />
        </div>
      </div>
      <div class="item_read" v-if="invoiceType == 2">
        <div class="item_label">
          <span class="label_icon">*</span>
          <span>公司税号</span>
        </div>
        <div class="item_input">
          <el-input
            v-model="gongsishuihao"
            placeholder="企业单位税号不能为空"
            placeholder-style="color:#999;font-size:8px;"
            maxlength="18"
          />
        </div>
      </div>
      <div class="item_default">
        <div class="item_label">设置为默认抬头</div>
        <div class="item_switch" @click="selectDefault">
          <img v-if="shifoumoren" src="../../../assets/my/31.png" alt="" />
          <div v-else class="switch_icon">
                <div class="switch_icon_1"></div>
            </div>
        </div>
      </div>
      <div class="select_1">
        <div class="select_1_le">
          <span>发票内容</span>
        </div>
        <div class="select_1_ri">
          <div class="select_1_item">
            <img src="../../../assets/default/3.png" alt="" />
            <span>明细</span>
          </div>
        </div>
      </div>
      <div class="item_read">
        <div class="item_label">
          <span class="label_icon">*</span>
          <span>联系方式</span>
        </div>
        <div class="item_input">
          <el-input
            v-model="mobile"
            placeholder="联系方式不能为空"
            placeholder-style="color:#999;font-size:8px;"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
            maxlength="11"
          />
        </div>
      </div>
      <div class="item_read">
        <div class="item_label">
          <span class="label_icon">*</span>
          <span>电子邮箱</span>
        </div>
        <div class="item_input">
          <el-input
            v-model="email"
            placeholder="电子邮箱不能为空"
            placeholder-style="color:#999;font-size:8px;"
            maxlength="16"
          />
        </div>
      </div>
    </div>
    <div class="operation">
      <div class="operation_1" @click="submitInvoice">提交</div>
    </div>
  </div>
  <footerPage></footerPage>
</template>
  
  
<script name="invoice" setup>
import { post65f03e149ff77, post66191605b9480,post65f03ee17453b } from "@/utils/api.js";
import { validate } from '@/utils/validate'
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import titleBack from "../titleBack.vue";
import titleText from "../titleText.vue";
import { ref, onMounted, inject } from "vue";
const injectMessage = inject('$message');
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import { storeToRefs } from 'pinia'
import { useUserStore } from "@/stores/user";
let userStore = useUserStore();
let { userInfo } = storeToRefs(userStore);

let freecourselist_id = ref(route.query.freecourselist_id);  // 课程id
let freecourseorder_id = ref(route.query.freecourseorder_id);  // 订单id

let name = ref("");
let gongsishuihao = ref("");
let shifoumoren = ref(true);
let fapiaoneirong = ref("明细");
let mobile = ref(userInfo.value.phone);
let email = ref("");

onMounted(() => {
  getInvoice();
});
// 提交
function submitInvoice() {
  if (!name.value) {
    injectMessage.error('请输入发票抬头');
    return;
  }
  if (invoiceType.value == 2 && !gongsishuihao.value) {
    injectMessage.error('请输入企业单位税号');
    return 
  }
  if (!mobile.value) {
    injectMessage.error('请输入联系方式');
    return;
  }
  if (!validate(mobile.value, 'phone')) {
    injectMessage.error('请输入正确的联系方式');
    return;
  }
  if (!email.value) {
    injectMessage.error('请输入电子邮箱');
    return;
  }
  if (!validate(email.value, 'email')) {
    injectMessage.error('请输入正确的电子邮箱');
    return;
  }
  post66191605b9480({
    freecourselist_id: freecourselist_id.value,
    freecourseorder_id: freecourseorder_id.value,
    taitouleixing: invoiceType.value
  }).then(res => {
    if (res.code == 1) {
      injectMessage.success('提交成功');
      router.go(-1);
    }
  }).catch(err => {
    console.log(err);
  })
  post65f03ee17453b({
    taitouleixing: invoiceType.value,
    fapiaotaitou: name.value,
    gongsishuihao: invoiceType.value == 1 ? '' : gongsishuihao.value,
    shifoumoren: shifoumoren.value ? 1 : 0,
    lianxifangshi: mobile.value,
    dianziyouxiang: email.value
  }).then(res => {
      console.log(res);
  })
  
}
function selectDefault() {
  shifoumoren.value = !shifoumoren.value;
}

// 选择发票抬头
let invoiceType = ref(1);
function select(index) {
  invoiceType.value = index;
  getInvoice();
}
function getInvoice() {
  post65f03e149ff77({
    taitouleixing: invoiceType.value,
  })
    .then((res) => {
      console.log(res);
      if (res.code == 1) {
        if (res.data) {
          name.value = res.data.fapiaotaitou;
          shifoumoren.value = res.data.shifoumoren == 1 ? true : false;
          gongsishuihao.value = res.data.gongsishuihao;
          mobile.value = res.data.lianxifangshi;
          email.value = res.data.dianziyouxiang;
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
</script>
  
  <style lang="scss" scoped>
.information {
  margin-top: 110px;
  margin-bottom: 24px;
  padding: 18px 16px;
  background: #fff;
  min-height: 270px;
}
.content {
  background: #f6f7f9;
  padding: 12px;
  margin-top: 16px;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 8px;
    .item_label {
      color: #666;
    }
  }
  .item_read {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 8px;
    margin-top: 12px;
    .item_label {
      color: #666;
      .label_icon {
        color: #f43024;
      }
    }
    .item_input {
      text-align: right;
      font-size: 8px;
    }
    :deep(.el-input__inner) {
      text-align: right;
    }
  }
  .item_default {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 8px;
    margin-top: 12px;
    .item_label {
      color: #666;
    }
    .item_switch {
      img {
        width: 16px;
        height: 8px;
      }
    }
    .switch_icon {
      width: 16px;
      height: 8px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ddd;
      padding: 1px;
      overflow: hidden;
      .switch_icon_1 {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fff;
      }
    }
  }
  .select_1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    .select_1_le {
      font-size: 8px;
      color: #666;
    }
    .select_1_ri {
      display: flex;
      align-items: center;
      .select_1_item {
        display: flex;
        align-items: center;
        margin-left: 25px;
        font-size: 8px;
        cursor: pointer;
        img {
          width: 7px;
          height: 7px;
          margin-right: 8px;
        }
      }
    }
  }
}
.operation {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 23.5px;
  .operation_1 {
    width: 120px;
    height: 24px;
    background: #1f52ae;
    border-radius: 3px;
    font-size: 8px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 10px;
  }
  .operation_2 {
    border: 0.5px solid #1f52ae;
    width: 120px;
    height: 24px;
    background: #fff;
    border-radius: 3px;
    font-size: 8px;
    color: #1f52ae;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 12px;
  }
}

.save_btn {
  width: 120px;
  height: 24px;
  background: #1f52ae;
  font-size: 8px;
  color: #fff;
  border-radius: 3px;
  margin: 32px 0 0 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>